import pandas as pd
import plotly.express as px
from nicegui import ui

# 创建三个文本框
with ui.row():
    x_input = ui.input('x', placeholder='Enter x value').classes('w-20')
    y_input = ui.input('y', placeholder='Enter y value').classes('w-20')
    z_input = ui.input('z', placeholder='Enter z value').classes('w-20')

# 初始化一个空的 Plotly 图形
empty_fig = px.scatter_3d()  # 创建一个空的 3D 散点图
plot_component = ui.plotly(empty_fig)  # 将空的图形传递给 ui.plotly

# 更新散点图的函数
def update_plot():
    try:
        # 从文本框中获取输入的值
        x_value = float(x_input.value)
        y_value = float(y_input.value)
        z_value = float(z_input.value)

        # 创建 DataFrame
        df = pd.DataFrame({
            'x': [x_value],
            'y': [y_value],
            'z': [z_value]
        })

        # 使用 Plotly 生成 3D 散点图
        fig = px.scatter_3d(df, x='x', y='y', z='z', title='3D Scatter Plot')

        # 更新图形显示
        plot_component.figure = fig  # 直接更新 figure 属性
        plot_component.update()  # 强制更新组件

    except ValueError:
        ui.notify("请输入有效的数字！", type="negative")

# 创建按钮来更新散点图
ui.button('Update Plot', on_click=update_plot)

# 启动 NiceGUI 应用
ui.run()